<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="cv" width="800px" height="800px">您的浏览器不支持canvas</canvas>
  </body>
  <script>
    var cv = document.getElementById("cv");
    if (cv.getContext("2d")) {
      var ctx = cv.getContext("2d");
      ctx.beginPath();
      ctx.moveTo(400, 0);
      ctx.lineTo(350, 100);
      ctx.lineTo(240, 100);
      ctx.lineTo(330, 190);
      ctx.lineTo(280, 330);
      ctx.lineTo(400, 250);
      ctx.lineTo(530, 330);
      ctx.lineTo(480, 190);
      ctx.lineTo(580, 100);
      ctx.lineTo(450, 100);
      ctx.closePath(); //将最后一根线自动闭合
      ctx.fillStyle = "yellow";
      ctx.fill();
      ctx.strokeStyle = "red"
      ctx.stroke();
    } else {
      console.log(您的浏览器不支持canvas);
    }
  </script>
</html>
